import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Checkbox,
  Radio,
  Space,
  InputNumber,
} from "antd";
import { connect, history } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useState, useRef } from "react";
// import AddModal from "./AddModal";
// import CopyModal from "./CopyModal";

const Page = (props) => {
  const { dispatch, submitLoading, venueArr } = props;
  const [form] = Form.useForm();
  const addRef = useRef(null);
  const copyRef = useRef(null);

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);

  const editInfo = (params) => {
    dispatch({
      type: `${namespace}/queryItemInfo`,
      params,
      callback: (res) => {
        form.setFieldsValue({ ...res });
      },
    });
  };

  const toggleState = () => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: (res) => {
        form.setFieldsValue({ ...res });
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      let { id, countCycle, venueId } = record;
      return (
        <Space>
          <Button
            type="link"
            onClick={() => {
              history.push(
                `/stadium/performance/detail?id=${id}&venueId=${venueId}&grantCycle=${encodeURIComponent(
                  countCycle
                )}`
              );
            }}
          >
            查看业绩明细
          </Button>
        </Space>
      );
    },
  };

  return (
    <PageContainer>
      <ProTable
        // search={false}
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              history.push("/stadium/performance/set");
            }}
          >
            提成方案设置
          </Button>,
        ]}
        pagination={{
          showSizeChanger: true,
        }}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        scroll={{ x: 1500 }}
        columns={calcColumns({ operate, venueArr })}
      />
      {/* <AddModal ref={addRef} /> */}
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
